<template>
    <div class="edit">
        <span class="titleBig"> 
            编辑个人信息
        </span>
        <div style="display:flex">
            <div class="left">
                <ul>
                    <li>
                        <span>昵称：</span>
                        <input class="nameInput" v-model="username" type="text">
                    </li>
                    <li class="introduce">
                        <span>介绍：</span>
                        <textarea name="" id="" cols="30" rows="4" v-model="signature"></textarea>
                    </li>
                    <li>
                        <form>
                            <span class="sex">性别：</span>
                            <input type="radio" name="girl" value="1" v-model="param"><span>男</span>
                            <input type="radio" name="boy" value="2" v-model="param"><span>女</span>
                        </form>
                    </li>
                    <li class="birthDay">
                        <span>生日：</span>
                        <div class="select" @click="years()">
                            <span v-model="birthday.year">
                                {{birthday.year}}年
                            </span>
                            <span class="iconfont right">&#xe604;</span>
                            <ul v-show="year">
                                <li v-for="(item,index) in select.year" 
                                 @click="changeYear(item)" 
                                :key="index">{{item}}年</li>
                            </ul>
                        </div>
                        <div class="select" @click="months()">
                            <span v-model="birthday.month">
                                {{birthday.month}}月
                            </span>
                            <span class="iconfont right">&#xe604;</span>
                            <ul v-show="month">
                                <li v-for="(item,index) in select.month"
                                @click="changeMonth(item)" 
                                 :key="index">{{item}}月</li>
                            </ul>
                        </div>
                        <div class="select" @click="days()">
                             <span v-model="birthday.day">
                                {{birthday.day}}日
                            </span>
                            <span class="iconfont right">&#xe604;</span>
                            <ul v-show="day">
                                    <li v-for="(item,index) in select.day" 
                                    @click="changeDay(item)" 
                                    :key="index">{{item}}日</li>
                            </ul>
                        </div>
                    </li>
                    <li class="birthDay">
                        <span>地区：</span>
                        <div class="select" @click="changeProvice()">
                            <span class="iconfont right">&#xe604;</span>
                             <ul v-show="provinceShow">
                                <li v-for="(item,index) in updataProvince" :key="index" @click="updataProvinceFn(item.id)">{{item.province}}</li>
                            </ul>
                        </div>
                        <div class="select" @click="changeCity()">
                            <span class="iconfont right">&#xe604;</span>
                            <ul v-show="cityShow">
                                <li v-for="(item,index) in updataCity" :key="index">{{item.city}}</li>
                            </ul>
                        </div>
                    </li>
                    <li class="btnBox">
                        <button @click="postChang()" class="btn1 btn bc">保存</button>
                        <button class="btn2 btn qx">取消</button>
                    </li>
                </ul>
            </div>
            <div class="changeImg">
                <img :src="avatarUrl" alt="">
                <button class="btn3 changeBtn">修改图片</button>
            </div>
        </div>
        <slotChangeImg>
            <span name='title' slot="title">上传头像</span>
        </slotChangeImg>
    </div>
</template>
<script>

import tools from '../../utils/tools'
import slotChangeImg from './slotChangeImg.vue'
export default {
    name:'edit',
    data() {
        return {
            // 展示生日中的下拉
            year:false,
            month:false,
            day:false,
            // 下拉列表数据
            select:{
                year:[],
                month:[],
                day:[]
            },
            // 展示地区
            provinceShow:false,
            cityShow:false,
            // 地区列表数据
            area:{
                province : {"44" : "广东","11" : "北京","33" : "浙江","35" : "福建","42" : "湖北","31" : "上海","32" : "江苏","12" : "天津","13" : "河北","14" : "山西","15" : "内蒙古","21" : "辽宁","22" : "吉林","23" : "黑龙江","34" : "安徽","36" : "江西","37" : "山东","41" : "河南","43" : "湖南","45" : "广西","46" : "海南","50" : "重庆","51" : "四川","52" : "贵州","53" : "云南","54" : "西藏","61" : "陕西","62" : "甘肃","63" : "青海","64" : "宁夏","65" : "新疆","71" : "台湾","81" : "香港","82" : "澳门"},
     city : {
    "11" : {
        "1" : "东城","2" : "西城","3" : "崇文","4" : "宣武","5" : "朝阳","6" : "丰台","7" : "石景山","8" : "海淀","9" : "门头沟","11" : "房山","12" : "通州","13" : "顺义","14" : "昌平","15" : "大兴","16" : "怀柔","17" : "平谷","28" : "密云","29" : "延庆"
    },"12" : {
        "1" : "和平区","2" : "河东区","3" : "河西区","4" : "南开区","5" : "河北区","6" : "红桥区","7" : "塘沽区","8" : "汉沽区","9" : "大港区","10" : "东丽区","11" : "西青区","12" : "津南区","13" : "北辰区","14" : "武清区","15" : "宝坻区","21" : "宁河县","23" : "静海县","25" : "蓟县","26" : "滨海新区","27" : "保税区"
    },"13" : {
        "1" : "石家庄","2" : "唐山","3" : "秦皇岛","4" : "邯郸","5" : "邢台","6" : "保定","7" : "张家口","8" : "承德","9" : "沧州","10" : "廊坊","11" : "衡水"
    },"14" : {
        "1" : "太原","2" : "大同","3" : "阳泉","4" : "长治","5" : "晋城","6" : "朔州","7" : "晋中","8" : "运城","9" : "忻州","10" : "临汾","23" : "吕梁"
    },"15" : {
        "1" : "呼和浩特","2" : "包头","3" : "乌海","4" : "赤峰","5" : "通辽","6" : "鄂尔多斯","7" : "呼伦贝尔","22" : "兴安盟","25" : "锡林郭勒盟","26" : "乌兰察布盟","28" : "巴彦淖尔盟","29" : "阿拉善盟"
    },"21" : {
        "1" : "沈阳","2" : "大连","3" : "鞍山","4" : "抚顺","5" : "本溪","6" : "丹东","7" : "锦州","8" : "营口","9" : "阜新","10" : "辽阳","11" : "盘锦","12" : "铁岭","13" : "朝阳","14" : "葫芦岛"
    },"22" : {
        "1" : "长春","2" : "吉林","3" : "四平","4" : "辽源","5" : "通化","6" : "白山","7" : "松原","8" : "白城","24" : "延边朝鲜族自治州"
    },"23" : {
        "1" : "哈尔滨","2" : "齐齐哈尔","3" : "鸡西","4" : "鹤岗","5" : "双鸭山","6" : "大庆","7" : "伊春","8" : "佳木斯","9" : "七台河","10" : "牡丹江","11" : "黑河","12" : "绥化","27" : "大兴安岭"
    },"31" : {
        "1" : "黄浦区","3" : "卢湾区","4" : "徐汇区","5" : "长宁区","6" : "静安区","7" : "普陀区","8" : "闸北区","9" : "虹口区","10" : "杨浦区","12" : "闵行区","13" : "宝山区","14" : "嘉定区","15" : "浦东新区","16" : "金山区","17" : "松江区","18" : "青浦区","19" : "南汇区","20" : "奉贤区","30" : "崇明区"
    },"32" : {
        "1" : "南京","2" : "无锡","3" : "徐州","4" : "常州","5" : "苏州","6" : "南通","7" : "连云港","8" : "淮安","9" : "盐城","10" : "扬州","11" : "镇江","12" : "泰州","13" : "宿迁"
    },"33" : {
        "1" : "杭州","2" : "宁波","3" : "温州","4" : "嘉兴","5" : "湖州","6" : "绍兴","7" : "金华","8" : "衢州","9" : "舟山","10" : "台州","11" : "丽水"
    },"34" : {
        "1" : "合肥","2" : "芜湖","3" : "蚌埠","4" : "淮南","5" : "马鞍山","6" : "淮北","7" : "铜陵","8" : "安庆","10" : "黄山","11" : "滁州","12" : "阜阳","13" : "宿州","14" : "巢湖","15" : "六安","16" : "亳州","17" : "池州","18" : "宣城"
    },"35" : {
        "1" : "福州","2" : "厦门","3" : "莆田","4" : "三明","5" : "泉州","6" : "漳州","7" : "南平","8" : "龙岩","9" : "宁德"
    },"36" : {
        "1" : "南昌","2" : "景德镇","3" : "萍乡","4" : "九江","5" : "新余","6" : "鹰潭","7" : "赣州","8" : "吉安","9" : "宜春","10" : "抚州","11" : "上饶"
    },"37" : {
        "1" : "济南","2" : "青岛","3" : "淄博","4" : "枣庄","5" : "东营","6" : "烟台","7" : "潍坊","8" : "济宁","9" : "泰安","10" : "威海","11" : "日照","12" : "莱芜","13" : "临沂","14" : "德州","15" : "聊城","16" : "滨州","17" : "菏泽"
    },"41" : {
        "1" : "郑州","2" : "开封","3" : "洛阳","4" : "平顶山","5" : "安阳","6" : "鹤壁","7" : "新乡","8" : "焦作","9" : "濮阳","10" : "许昌","11" : "漯河","12" : "三门峡","13" : "南阳","14" : "商丘","15" : "信阳","16" : "周口","17" : "驻马店","18" : "济源"
    },"42" : {
        "1" : "武汉","2" : "黄石","3" : "十堰","5" : "宜昌","6" : "襄阳","7" : "鄂州","8" : "荆门","9" : "孝感","10" : "荆州","11" : "黄冈","12" : "咸宁","13" : "随州","28" : "恩施土家族苗族自治州","29" : "仙桃","30" : "潜江","31" : "天门","32" : "神农架"
    },"43" : {
        "1" : "长沙","2" : "株洲","3" : "湘潭","4" : "衡阳","5" : "邵阳","6" : "岳阳","7" : "常德","8" : "张家界","9" : "益阳","10" : "郴州","11" : "永州","12" : "怀化","13" : "娄底","31" : "湘西土家族苗族自治州"
    },"44" : {
        "1" : "广州","2" : "韶关","3" : "深圳","4" : "珠海","5" : "汕头","6" : "佛山","7" : "江门","8" : "湛江","9" : "茂名","12" : "肇庆","13" : "惠州","14" : "梅州","15" : "汕尾","16" : "河源","17" : "阳江","18" : "清远","19" : "东莞","20" : "中山","51" : "潮州","52" : "揭阳","53" : "云浮"
    },"45" : {
        "1" : "南宁","3" : "桂林","4" : "梧州","5" : "北海","6" : "防城港","7" : "钦州","8" : "贵港","9" : "玉林","10" : "百色","11" : "贺州","12" : "河池","13" : "来宾","14" : "崇左","22" : "柳州"
    },"46" : {
        "1" : "海口","2" : "三亚","90" : "其他"
    },"50" : {
        "1" : "万州区","2" : "涪陵区","3" : "渝中区","4" : "大渡口区","5" : "江北区","6" : "沙坪坝区","7" : "九龙坡区","8" : "南岸区","9" : "北碚区","10" : "万盛区","11" : "双桥区","12" : "渝北区","13" : "巴南区","14" : "黔江区","15" : "长寿区","22" : "綦江县","23" : "潼南县","24" : "铜梁县","25" : "大足县","26" : "荣昌县","27" : "璧山县","28" : "梁平县","29" : "城口县","30" : "丰都县","31" : "垫江县","32" : "武隆县","33" : "忠县","34" : "开县","35" : "云阳县","36" : "奉节县","37" : "巫山县","38" : "巫溪县","40" : "石柱土家族自治县","41" : "秀山土家族苗族自治县","42" : "酉阳土家族苗族自治县","43" : "彭水苗族土家族自治县","81" : "江津区","82" : "合川市","83" : "永川区","84" : "南川市"
    },"51" : {
        "1" : "成都","3" : "自贡","4" : "攀枝花","5" : "泸州","6" : "德阳","7" : "绵阳","8" : "广元","9" : "遂宁","10" : "内江","11" : "乐山","13" : "南充","14" : "眉山","15" : "宜宾","16" : "广安","17" : "达州","18" : "雅安","19" : "巴中","20" : "资阳","32" : "阿坝","33" : "甘孜","34" : "凉山"
    },"52" : {
        "1" : "贵阳","2" : "六盘水","3" : "遵义","4" : "安顺","22" : "铜仁","23" : "黔西南","24" : "毕节","26" : "黔东南","27" : "黔南"
    },"53" : {
        "1" : "昆明","3" : "曲靖","4" : "玉溪","5" : "保山","6" : "昭通","23" : "楚雄","25" : "红河","26" : "文山","27" : "思茅","28" : "西双版纳","29" : "大理","31" : "德宏","32" : "丽江","33" : "怒江","34" : "迪庆","35" : "临沧"
    },"54" : {
        "1" : "拉萨","21" : "昌都","22" : "山南","23" : "日喀则","24" : "那曲","25" : "阿里","26" : "林芝"
    },"61" : {
        "1" : "西安","2" : "铜川","3" : "宝鸡","4" : "咸阳","5" : "渭南","6" : "延安","7" : "汉中","8" : "榆林","9" : "安康","10" : "商洛"
    },"62" : {
        "1" : "兰州市","2" : "嘉峪关","3" : "金昌","4" : "白银","5" : "天水","6" : "武威","7" : "张掖","8" : "平凉","9" : "酒泉","10" : "庆阳","24" : "定西","26" : "陇南","29" : "临夏","30" : "甘南"
    },"63" : {
        "1" : "西宁","21" : "海东","22" : "海北","23" : "黄南","25" : "海南","26" : "果洛","27" : "玉树","28" : "海西"
    },"64" : {
        "1" : "银川","2" : "石嘴山","3" : "吴忠","4" : "固原","5" : "中卫"
    },"65" : {
        "1" : "乌鲁木齐","2" : "克拉玛依","21" : "吐鲁番","22" : "哈密","23" : "昌吉","27" : "博尔塔拉","28" : "巴音郭楞","29" : "阿克苏","30" : "克孜勒苏","31" : "喀什","32" : "和田","40" : "伊犁","42" : "塔城","43" : "阿勒泰","44" : "石河子"
    },"71" : {
        "1" : "台北市","2" : "高雄市","3" : "基隆市","4" : "台中市","5" : "台南市","6" : "新竹市","7" : "嘉义市","8" : "台北县","9" : "宜兰县","10" : "桃园县","11" : "新竹县","12" : "苗栗县","13" : "台中县","14" : "彰化县","15" : "南投县","16" : "云林县","17" : "嘉义县","18" : "台南县","19" : "高雄县","20" : "屏东县","21" : "澎湖县","22" : "台东县","23" : "花莲县"
    },"81" : {
        "2" : "中西区","3" : "东区","4" : "九龙城区","5" : "观塘区","6" : "南区","7" : "深水埗区","8" : "黄大仙区","9" : "湾仔区","10" : "油尖旺区","11" : "离岛区","12" : "葵青区","13" : "北区","14" : "西贡区","15" : "沙田区","16" : "屯门区","17" : "大埔区","18" : "荃湾区","19" : "元朗区"
    },"82" : {
        "2" : "花地玛堂区","3" : "圣安多尼堂区","4" : "大堂区","5" : "望德堂区","6" : "风顺堂区","7" : "氹仔","8" : "路环"
    }
            }
            },
            // 对象变数组后的省
            updataProvince:[],
            updataCity:[],
            // 性别
            param:1,
            username:'',
            signature:'',
            cityCode:'',
            birthday:{
                year:'',
                month:'',
                day:''
            },
            avatarUrl:'',
            showChangImg:true
        }
    },
    components:{slotChangeImg},
    created() {
       console.log('res')
       return
        this.$http.get('/api/user/account').then((res)=>{
                if (res.status == 200&&res.data.code ==200) {
                    var profile = res.data.profile
                     this.username = profile.nickname
                     this.param =profile.gender
                     this.signature = profile.signature
                     this.cityCode = profile.city
                     this.birthday = tools.formatTime(profile.birthday)
                     this.avatarUrl = profile.avatarUrl
                } else {
                    console.log(res)
                }
            }).catch((err)=>{
                console.log(err)
            })
           
    },
    mounted() {
        // 年列表
        let count = 1920
        var date = new Date();
        for(count;count<=date.getFullYear();count++){
            this.select.year.push(count)
        }
        // 月列表
        for(var i = 1;i<=12;i++){
            this.select.month.push(i)
        }
        // 日列表
        var day = new Date(this.birthday.year,this.birthday.month,0);
        for(var i = 1;i<=day.getDate();i++){
            this.select.day.push(i)
        }
        for(let item in this.area.province){
            this.updataProvince.push({
                id:item,
                province:this.area.province[item]
            })
        }
        
    },
    methods: {
        updataDay(year,month){
            this.select.day = [];
            var day = new Date(year,month,0);
            for(var i = 1;i<=day.getDate();i++){
                this.select.day.push(i)
            }
        },
        years(){
            this.year = !this.year
        },
        months(){
            this.month = !this.month
        },
        days(){
            this.day = !this.day
        },
        changeYear(year){
            this.birthday.year = year
            this.updataDay(year,this.birthday.month)
        },
         changeMonth(month){
            this.birthday.month = month
             this.updataDay(this.birthday.year,month)
        },
         changeDay(day){
            this.birthday.day = day
        },
        changeProvice(){
            this.provinceShow = !this.provinceShow
        },
        changeCity(){
            this.cityShow = !this.cityShow
        },
        updataProvinceFn(id){
            for(let item in this.area.city){
                if(item==id){
                    // console.log(this.area.city[item])
                    // return
                    for(let item2 in this.area.city[item]){
                        this.updataCity.push({
                            id:item2,
                            city:this.area.city[item][item2]
                        })
                    }
                    break;
                }
                
        }
        },
        postChang(){
             let bir = `${this.birthday.year}-${this.birthday.month}-${this.birthday.day}`
             let date = new Date(bir)
             this.$http.get('/api/user/update',{
                gender:this.param,
                birthday:date.getTime(new Date(bir)),
                nickname:this.username,
                signature:this.signature
             }).then((res)=>{
                if (res.status == 200&&res.data.code ==200) {
                    console.log(res)
                } else {
                    console.log(res)
                }
            }).catch((err)=>{
                console.log(err)
            })
        }
        
    },
}
</script>
<style lang="less">
@font-face {
  font-family: 'iconfont';
  src: url('../../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../../public/font_home/font-icon5/iconfont.ttf?t=1663388423335') format('truetype');
}
textarea {
  resize: none;
//   border: none;
  outline: none
}
input,button,select,textarea{outline:none}
input{  
	background:none;  

	border:none;
}

/* 如果input必须要有边框，但需要去掉选中时的蓝色框 ↓↓↓ */
input,textarea{  
	background:none;  
	outline:none;  
	border:1px solid #ccc;
    border-radius: 5px;
}
// input:focus{   
// 	border:none;
// }

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    div,span,ul,li,img{
    font-size: 0;
}
.edit{
    width: 100%;
     overflow: hidden;
     box-sizing: border-box;
    font-size: 23px;

    .left{
        ul{
            width: 700px;
            // border: 1px solid red;
            .introduce{
                display: flex;
                textarea{
                    padding: 2px 10px;
                    font-size: 17px;
                    color: #373737;
                    padding-left: 10px;
                    border:1px solid #ccc;
                }
                textarea::-webkit-scrollbar{
                    width: 5px;
                }
                textarea::-webkit-scrollbar-thumb{
                    width: 5px;
                    border: 10px;
                    background: #E0E0E0;
                    height: 10px !important;
                    border-radius: 20px;
                }
            }
            li{
                margin-top: 30px;
                 font-size: 16px;
                 form{
                    display: flex;
                    align-items: center;
                    .sex{
                        margin-left: 0px;
                    }
                    span{
                        font-size: 17px;
                        margin-left: 10px;
                    }
                    input{
                        margin-left: 20px;
                    }
                 }
                span,input{
                    font-size: 16px;
                    color: #373737;
                }
                input{
                    font-size: 17px;
                    color: #373737;
                    padding-left: 10px;
                }
                input[type=radio]{
                    height: 25px;
                    width: 25px;
                    background: red;
                }
                .nameInput{
                    width: 525px;
                    height: 35px;
                }
                
            }
            .birthDay{
                display: flex;
                    .select{
                        height: 30px;
                        width: 160px;
                        margin-right: 15px;
                        border:1px solid #ccc;
                        position: relative;
                        display: flex;
                        align-items: center;
                        // justify-content: center;
                        .right{
                            font-size: 14px;
                            color: #999999;
                                position: absolute;
                             right: 5px;
                        }
                        ul::-webkit-scrollbar {/*滚动条整体样式*/
                                width: 5px;
                               
                            }
                        ul::-webkit-scrollbar-thumb{
                            width: 5px;
 border-right: 1px solid #F3F3F3;
                                background: #E0E0E0;
                            border-radius: 10px;
                            
                            
                            // height: 30px !important;
                        }
                        ul{
                            border:1px solid #E0E0E0;
                            position: absolute;
                            top: 31px;
                            width: 160px;
                            height: 273px;
                            background:#FFFFFF;
                            overflow-y:scroll ;
                            z-index: 10;
                            li{
                                margin-top: 0px;
                                padding:10px 20px;
                            }
                            li:hover{
                                background:#F5F5F5;
                            }
                        }
                        span{
                            margin-left: 20px;
                        }
                    }
                }
            .btnBox{
                margin-left: 80px;
            }
            .btn{
                font-size: 18px;
               margin-left: 40px;
            }
            .bc:hover{
                background: #D73535;
            }
             .qx:hover{
                background: #F2F2F2;
            }
        }
    }
    .changeImg{
        width: 192px;
        margin-top: 100px;
        img{
             border-radius: 5px;
             height: 192px;
             width: 192px;
        }
        .changeBtn{
            margin: 0 auto;
            font-size: 18px;
            color: #343434;
            margin: 30px;
        }
        .changeBtn:hover{
                background: #F2F2F2;
            }
    }
}
</style>